{% extends './management_base.html' %}

{% block title %}博文管理{% end %}

{% block body %}
<div class="container">
    <div class="page-header">
        <h1 class="page-title">
            博文管理
        </h1>
    </div>
    <div class="card">
        <div class="card-header">
            <div class="col-lg-3 ml-auto">
                <form class="input-icon my-3 my-lg-3">
                    <input type="text" class="form-control header-search" placeholder="博文查询" name="search">
                    <div class="input-icon-addon">
                        <button type="button" class="btn btn-secondary" onclick="queryCompany()"><i
                                class="fe fe-search"></i></button>
                    </div>
                </form>
            </div>
        </div>
        <div class="dimmer" id="dimmer_body">
            <div class="loader"></div>
            <div class="table-responsive dimmer-content">
                <table class="table card-table table-vcenter text-nowrap datatable">
                    <thead>
                        <tr>
                            <th class="w-1">No.</th>
                            <th>文章标题</th>
                            <th>分类</th>
                            <th>标签</th>
                            <th>阅读人数</th>
                            <th>评论数量</th>
                            <th>创建时间</th>
                            <th>更新时间</th>
                            <th>修改</th>
                            <th>删除</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>暂无数据！</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer" name="pagnate" style="text-align: center;">
            <label>共 <span id="data_count">0</span> 条</label>
            <label>每页 <select name="the_limit" class="select">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="30">35</option>
                </select> 条</label>
            <label>
                <button class="btn btn-blue" id="previou_page">上一页</button>
                <label><span id="current_page">1</span> / <span id="total_page">1</span></label>
                <button class="btn btn-blue" id="next_page">下一页</button>
            </label>
        </div>
    </div>
</div>
<!-- 删除博文的模态框 -->
<div class="modal fade" id="delPostModal" role="dialog" aria-labelledby="">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="card-status bg-red"></div>
                <h4 class="text-center" id="modal_title">删除博文</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"> </button>
            </div>
            <div class="dimmer">
                <div class="loader"></div>
                <form class="card-body dimmer-content">
                    <input type="hidden" name="post_id" value="">
                    <div class="form-group">
                        是否删除博文 【 <span name='post_title'></span> 】
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                        <button type="button" class="btn btn-primary" onclick="goDel()">删除</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    require(['jquery'], function ($) {
        getData()
    })

    function getData(page=1, limit=10) {
        $("#dimmer_body").addClass("active")

        $.ajax('/api/post_data', {
            method: "GET",
            data: {
                page: parseInt(page),
                limit: parseInt($("select[name=the_limit]").val() || limit),
                // company_name: $("input[name=search]").val()
            }
        }).done(function (data) {
            console.log(data)
            if (data["status"] == 1) {
                $("#current_page")[0].innerText = page
                // 总条数
                $("#data_count")[0].innerText = data["data"]["data_count"]
                // 分几页
                $("#total_page")[0].innerText = Math.ceil(data["data"]["data_count"] / limit)
                if (data["data"]["data_count"] > 0) {
                    $("tbody").empty()
                }
                // 拼接数据
                for (i = 0; i < data["data"]["data_list"].length; i++) {
                    addDataList(data["data"]["data_list"][i], i + 1)
                }
            } else {
                showAlert(0, data["msg"])
                return false
            }
        }).fail(function () {

        }).always(() => {
            $("#dimmer_body").removeClass("active")
        })
    }

    function addDataList(data, data_index){
        let tbody = $("tbody")[0]
        let new_tr = document.createElement("tr")
        let tags = ""
        // console.log(data["tags"])    
        for(let i=0;i<data["tags"].length;i++){
            tags += `<span class="tag">`+ data["tags"][i] +`</span>\n`
        }
        console.log(`这是标签：${data["tags"]}`)

        new_tr.innerHTML = `<td>${data_index}</td>
                            <td><a href="/manage/post/detail/${data["id"]}" target="_blank">${data["title"]}</a></td>
                            <td>${data["category"] }</td>
                            <td>${tags}</td>
                            <td>${data["views"]}</td>
                            <td>${data["comments"]}</td>
                            <td>${data["create_time"]}</td>
                            <td>${data["modified_time"]}</td>
                            <td>
                                <a class="icon" href="javascript:void(0)" data-toggle="modal"
                                    data-target="#editCompanyModal" onclick="editCompany()">
                                    <i class="fe fe-edit"></i>
                                </a>
                            </td>
                            <td>
                                <a class="icon" href="javascript:void(0)" data-toggle="modal"
                                    data-target="#delPostModal" onclick="delPost(${data["id"]},'${data["title"]}')">
                                    <i class="fe fe-trash-2"></i>
                                </a>
                            </td>`
        tbody.append(new_tr)
    }
    
    function delPost(post_id, title){
        $("#delPostModal input[name=post_id]").val(post_id)
        $("#delPostModal span[name=post_title]")[0].innerText = title
    }
    function goDel() {
        let inputPostId = $("#delPostModal input[name=post_id]").val()
        $("#delPostModal .dimmer").addClass("active")
        $.ajax("/api/del_post", {
            method: "DELETE",
            contentType: "application/json",
            dataType: "json",
            headers: {},
            data: JSON.stringify({
                post_id: inputPostId,
            })
        }).done(function(data){
            if (data["status"]==1){
                showAlert(1, data["msg"])
                $("#delPostModal").modal("hide")
                getData()
            }else{
                showAlert(0, data["msg"])
                return false
            }
        }).fail(function(xhr, error){

        }).done(()=>{
            $("#delPostModal .dimmer").removeClass("active")
        })
    }
</script>
{% end %}